<template>
  <v-overlay v-model="containerStatus" v-if="containerStatus" class="align-center justify-center">
    <v-progress-circular color="primary" size="64" indeterminate></v-progress-circular>
  </v-overlay>
  <v-app v-else>
    <v-app-bar color="primary">
      <v-app-bar-nav-icon @click="drawerSwitch = !drawerSwitch"></v-app-bar-nav-icon>
      <v-app-bar-title>{{ $store.state.baseConfig.title }}</v-app-bar-title>
    </v-app-bar>
    <v-navigation-drawer v-model="drawerSwitch" :temporary="isTemporary">
      <v-list color="primary">
        <v-list-item to="/about" :prepend-avatar="require('@/assets/img/avatar.png')" :title="userInfo.username"
          subtitle="2416677216@qq.com">
          <template v-slot:append>
            <v-btn size="small" variant="text" icon="mdi-menu-down"></v-btn>
          </template>
        </v-list-item>
      </v-list>
      <v-divider></v-divider>
      <!-- <v-list :lines="false" density="compact" nav>
        <v-list-item v-for="item in items" :key="item" :value="item" active-color="primary" :to="item.router">
          <template v-slot:prepend>
            <v-icon :icon="item.icon"></v-icon>
          </template>
          <v-list-item-title v-text="item.text"></v-list-item-title>
        </v-list-item>
      </v-list> -->
      <v-list :lines="false" density="compact" nav color="primary">

        <v-list-item color="primary" to="/default/book/list">
          <template v-slot:prepend>
            <v-icon icon="mdi-book-cog"></v-icon>
          </template>
          <v-list-item-title>{{ $t('preset_book') }}</v-list-item-title>
        </v-list-item>

        <v-list-item color="primary" to="/dict/mine">
          <template v-slot:prepend>
            <v-icon icon="mdi-book-heart"></v-icon>
          </template>
          <v-list-item-title>我的单词本</v-list-item-title>
        </v-list-item>

        <v-list-item color="primary" to="/dict/label">
          <template v-slot:prepend>
            <v-icon icon="mdi-tag"></v-icon>
          </template>
          <v-list-item-title>标签管理</v-list-item-title>
        </v-list-item>

        <v-list-item color="primary" v-hasPerim="['show-feature-hidden']" v-if="$store.state.userPermissionArray.includes('show-feature-hidden')">
          <template v-slot:prepend>
            <v-icon icon="mdi-notebook-heart"></v-icon>
          </template>
          <v-list-item-title>笔记管理</v-list-item-title>
        </v-list-item>

        <v-list-item color="primary" v-hasPerim="['show-feature-hidden']" v-if="$store.state.userPermissionArray.includes('show-feature-hidden')">
          <template v-slot:prepend>
            <v-icon icon="mdi-alert-box"></v-icon>
          </template>
          <v-list-item-title>错题管理</v-list-item-title>
        </v-list-item>

        <v-list-group v-hasPerim="['show-feature-hidden']" v-if="$store.state.userPermissionArray.includes('show-feature-hidden')">
          <template v-slot:activator="{ props }">
            <v-list-item v-bind="props">
              <template v-slot:prepend>
                <v-icon icon="mdi-symbol"></v-icon>
              </template>
              <v-list-item-title>音标管理</v-list-item-title>
            </v-list-item>
          </template>

          <v-list-item title="拼音" />
          <v-list-item title="美式音标" />
          <v-list-item title="国际音标" />

        </v-list-group>

        <v-list-item color="primary" v-hasPerim="['show-feature-hidden']" v-if="$store.state.userPermissionArray.includes('show-feature-hidden')">
          <template v-slot:prepend>
            <v-icon icon="mdi-heart"></v-icon>
          </template>
          <v-list-item-title>我的收藏</v-list-item-title>
        </v-list-item>

        <v-list-group>
          <template v-slot:activator="{ props }">
            <v-list-item v-bind="props">
              <template v-slot:prepend>
                <v-icon icon="mdi-school"></v-icon>
              </template>
              <v-list-item-title>单词学习</v-list-item-title>
            </v-list-item>
          </template>

          <v-list-item title="单词听写" to="/practice/book-list/listen" />
          <v-list-item title="单词四选一" to="/practice/book-list/choose" />
          <v-list-item v-if="$store.state.userPermissionArray.includes('show-feature-hidden')" title="完形填空" />
          <v-list-item v-if="$store.state.userPermissionArray.includes('show-feature-hidden')" title="听力" />

        </v-list-group>

        <v-list-group v-hasPerim="['show-feature-hidden']" v-if="$store.state.userPermissionArray.includes('show-feature-hidden')">
          <template v-slot:activator="{ props }">
            <v-list-item v-bind="props">
              <template v-slot:prepend>
                <v-icon icon="mdi-newspaper-variant"></v-icon>
              </template>
              <v-list-item-title>在线文章</v-list-item-title>
            </v-list-item>
          </template>

          <v-list-item to="/article/baidu/list" title="百度翻译" />

        </v-list-group>

        <v-list-group v-hasPerim="['read-word-search-user']" v-if="$store.state.userPermissionArray.includes('read-word-search-user')">
          <template v-slot:activator="{ props }">
            <v-list-item v-bind="props">
              <template v-slot:prepend>
                <v-icon icon="mdi-spider"></v-icon>
              </template>
              <v-list-item-title>单词搜索</v-list-item-title>
            </v-list-item>
          </template>

          <v-list-item to="/search/baidu/fanyi" title="百度翻译" />
          <v-list-item to="/search/baidu/hanyu" title="百度汉语" />
          <v-list-item to="/word/diy/diy/diy/true" title="自定义单词" />

        </v-list-group>

      </v-list>
    </v-navigation-drawer>
    <v-main>
      <router-view />
    </v-main>
  </v-app>
  <v-snackbar v-model="snackbar" multi-line>
    {{ errorText }}
    <template v-slot:actions>
      <v-btn color="red" variant="text" @click="snackbar = false">
        查看详情
      </v-btn>
    </template>
  </v-snackbar>
</template>

<script>
import { getUserInfo } from "@/api/auth.js";
// import require2 from "./util/require";
export default {
  name: 'App',
  data() {
    return {
      containerStatus:true,
      drawerSwitch: false,
      isTemporary: true,
      selectedItem: 0,
      snackbar: false,
      errorText: '',
      items: [
        { text: '默认单词本', icon: 'mdi-folder', router: '/dict/default' },
        { text: '自定义单词本', icon: 'mdi-account-multiple', router: '/dict/mine' },
        { text: '我的笔记', icon: 'mdi-history' },
        { text: '日历和便签', icon: 'mdi-upload' },
        { text: '单词学习', icon: 'mdi-check-circle' },
        { text: '我的标签', icon: 'mdi-check-circle', router: '/dict/label' },
        { text: '我的收藏', icon: 'mdi-star' },
        { text: '单词搜索', icon: 'mdi-cloud-upload' },
      ],
      userInfo: { username: null }
    }
  },
  created() {
    this.loadUserinfo()
    window.onerror = function (message, source, lineno, colno, error) {
      console.log(message, source, lineno, colno, error)
    }
  },
  methods: {
    // loadUserinfo() {
    //   getUserInfo().then(resp => {
    //     resp.json().then(data => {
    //       if (data.code != '200') {
    //         document.location.href = "http://localhost:5173/login.html?app=dictionary&callback=http://localhost:8083/login.html"
    //       }
    //     })
    //   })
    // },
    showError(act, msg) {
      this.snackbar = act
      this.errorText = msg
    },
    loadUserinfo() {
      getUserInfo().then(resp => {
        if (resp.data == null) document.location.href = '/login.html';
        else {
          this.userInfo = resp.data
          this.$store.commit('updateUserInfo', this.userInfo)
          this.containerStatus=this.$store.state.userPermissionArray.length==0
        }
      })
    },
  }
}
</script>
